<template>
	<div>
		<el-form ref="editForm" :model="formData" :rules="formRules" :label-width="formLabelWidth" @submit.prevent>
			<el-row>
				<el-col v-for="(item, index) in formOptions" :key="index" :span="item.span || 24">
					<el-form-item
						:label="item.label"
						:prop="item.prop ? item.prop : item.key"
						:label-width="item.labelWidth ? item.labelWidth : formLabelWidth"
						class="e-search-from-item"
					>
						<!-- button -->
						<template v-if="item.type === 'button'">
							<el-button v-if="!item.readonly" v-bind="item.props" @click="handleButtonClick(item)">{{
								item.title ? item.title : formData[item.key] || item.props.placeholder
							}}</el-button>
							<span v-else>{{ formData[item.key] ? formData[item.key] : '无' }}</span>
						</template>
						<!-- Input -->
						<template v-if="item.type === 'input'">
							<el-input
								v-if="!item.readonly"
								v-model="formData[item.key]"
								v-bind="item.props"
								@blur="
									() => {
										handleValueChange(formData[item.key], item);
									}
								"
							/>
							<span v-else>{{ formData[item.key] ? formData[item.key] : '无' }}</span>
						</template>
						<!-- Input -->
						<template v-if="item.type === 'numberInput'">
							<el-input
								v-if="!item.readonly"
								v-model.number="formData[item.key]"
								type="number"
								v-bind="item.props"
								@blur="
									() => {
										handleValueChange(formData[item.key], item);
									}
								"
							/>
							<span v-else>{{ formData[item.key] ? formData[item.key] : '无' }}</span>
						</template>
						<!-- Number -->
						<template v-if="item.type === 'number'">
							<el-input-number v-if="!item.readonly" v-model="formData[item.key]" v-bind="item.props" style="width: 100%" />
							<span v-else>{{ formData[item.key] ? formData[item.key] : '无' }}</span>
						</template>
						<!-- Select -->
						<template v-if="item.type === 'select'">
							<el-select
								:class="item.class ? item.class : 'selectfromdown'"
								v-if="!item.readonly"
								v-model="formData[item.key]"
								v-bind="item.props"
								@change="(value) => handleValueChange(value, item)"
							>
								<el-option v-for="(sitem, sindex) in item.options" :key="sindex" v-bind="sitem" />
							</el-select>
							<span v-else>{{ selectView(item, formData[item.key]) }}</span>
						</template>
						<!-- Time -->
						<template v-if="item.type === 'time'">
							<el-time-select
								v-if="!item.readonly"
								v-model="formData[item.key]"
								v-bind="item.props"
								style="width: 100%"
								@change="
									(value) => {
										handleValueChange(value, item);
									}
								"
							/>
							<span v-else>{{ formData[item.key] ? formData[item.key] : '无' }}</span>
						</template>
						<!-- Date -->
						<template v-if="item.type === 'date'">
							<el-date-picker
								v-if="!item.readonly"
								v-model="formData[item.key]"
								v-bind="item.props"
								style="width: 100%"
								@change="
									(value) => {
										handleValueChange(value, item);
									}
								"
							/>
							<span v-else>{{ formData[item.key] ? formData[item.key] : '无' }}</span>
						</template>
						<!-- Radio -->
						<template v-if="item.type === 'radio'">
							<el-radio-group
								v-if="!item.readonly"
								v-model="formData[item.key]"
								v-bind="item.props"
								@change="
									(value) => {
										handleValueChange(value, item);
									}
								"
							>
								<el-radio v-for="(sitem, sindex) in item.options" :key="sindex" :label="sitem.label">{{ sitem.text }}</el-radio>
							</el-radio-group>
							<span v-else>{{ radioView(item, formData[item.key]) }}</span>
						</template>
						<!-- Checkbox -->
						<template v-if="item.type === 'checkbox'">
							<el-checkbox-group v-if="!item.readonly" v-model="formData[item.key]" v-bind="item.props">
								<el-checkbox v-for="(sitem, sindex) in item.options" :key="sindex" :label="sitem.label" v-bind="sitem.props">{{
									sitem.text
								}}</el-checkbox>
							</el-checkbox-group>
							<span v-else>{{ checkBoxView(item, formData[item.key]) }}</span>
						</template>
						<!-- Cascader -->
						<template v-if="item.type === 'cascader'">
							<el-cascader
								v-if="!item.readonly"
								v-model="formData[item.key]"
								v-bind="item.props"
								style="width: 100%"
								@change="handleCascaderChange(item, $event)"
							/>
							<span v-else>{{ formData[item.key] }}</span>
						</template>
						<template v-if="item.type === 'switch'">
							<el-switch v-if="!item.readonly" v-model="formData[item.key]" v-bind="item.props" />
							<span v-else>{{ formData[item.key] }}</span>
						</template>
						<!-- <template v-if="item.type === 'customCascader'">
              <custom-cascader v-if="!item.readonly"
                               :cascader-options="item.props"
                               :currentSelect="item.currentSelect"
                               @on-load-data="item.loadOptions"
                               @on-change="
                  value => {
                    handleCascaderChange(value, item);
                  }
                "></custom-cascader>
              <span v-else>{{ item.formatter?customCascaderView(item):formData[item.key] }}</span>
            </template> -->
						<!-- 插槽字段 -->
						<template v-if="item.slotName">
							<slot :name="item.slotName" :scope="{ item, formData }"></slot>
						</template>
					</el-form-item>
				</el-col>
				<slot name="footer"></slot>
			</el-row>
		</el-form>
	</div>
</template>

<script>
// import customCascader from '@/components/custom-cascader';
export default {
	name: 'e-form',
	components: {
		// customCascader
	},
	props: {
		formOptions: {
			type: [Array, Object],
			default() {
				return [];
			},
		},
		formLabelWidth: {
			type: String,
			default: '80px',
		},
		formDataCurrent: {
			type: Object,
			default() {
				return {};
			},
		},
		formRules: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			formData: {},
		};
	},
	watch: {
		formOptions: {
			handler(value) {
				this.handleFormDataCreate(value);
			},
			immediate: true,
		},
		formDataCurrent: {
			handler(value) {
				this.formData = value;
				this.handleFormDataCreate(this.formOptions);
			},
			immediate: true,
		},
	},
	computed: {
		// 表单数据
		editDatas() {
			return this.$refs.editForm.formData;
		},
	},
	methods: {
		handleButtonClick(item) {
			this.$emit(item.event, item);
		},
		handleValueChange(value, item) {
			if (item.onChange) {
				this.$emit(item.onChange, value, item, this.formData);
			}
		},
		handleCascaderChange(item, value) {
			if (item.onChange) {
				this.$emit(item.onChange, value);
			}
		},
		selectView(item, value) {
			const option = item.options.find((op) => op.value === value);
			return option ? option.label : '无';
		},
		radioView(item, value) {
			const option = item.options.find((op) => op.label === value);
			return option ? option.text : '无';
		},
		checkBoxView(item, values) {
			let output = '';
			if (values.length > 0) {
				// const temp = values.split(',');
				const options = item.options.filter((op) => values.indexOf(op.label) >= 0);
				options.map((item) => {
					output += ` ${item.text}`;
				});
			}
			return output ? output : '无';
		},
		customCascaderView(item) {
			this.$emit(item.formatter);
		},
		handleFormDataCreate(list) {
			for (const index in list) {
				const item = list[index];
				let data;
				switch (item.type) {
					case 'checkbox':
						data = [];
						break;
					case 'switch':
						data = false;
						break;
					default:
						data = '';
						break;
				}
				if (!this.formData[item.key]) {
					this.formData[item.key] = data;
				}
			}
			/*list.map(item => {
        let data;
        switch (item.type) {
          case 'checkbox':
            data = [];
            break;
          default:
            data = '';
            break;
        }
        if (!this.formData[item.key]) {
          this.$set(this.formData, item.key, data);
        }
      });*/
			// console.log(this.formData)
		},
		handleRefresh() {
			if (this.$refs.editForm) {
				this.$refs.editForm.resetFields();
			}
		},
		handleValidate(fun) {
			return new Promise((resolve, reject) => {
				this.$refs.editForm.validate(valid => {
					if (valid) {
						console.log(valid, 'valid');
						if (fun) {
							fun(valid);
						}
						resolve(true);
					} else {
						reject(false);
					}
				});
			// 	this.$refs.editForm.validate((valid) => {
			// 	console.log(valid, 'valid');
			// 	fun(valid);
			// 	// return valid
			// });
			});
		},
		/**
		 * @description: 清除表单验证
		 * @param {*} keys string数组，不传全部清除
		 * @return {*}
		 */
		handleClearnValidate(keys) {
			if (this.$refs.editForm) {
				this.$refs.editForm.clearValidate(keys);
			}
		},
		/**
		 * @description: 校验单个表单项
		 * @param {*} keys string数组
		 * @param {*} callback 回调
		 * @return {*}
		 */
		handleValidateField(keys, callback) {
			if (this.$refs.editForm) {
				this.$refs.editForm.validateField(keys, callback);
			}
		},
	},
	created() {},
	mounted() {},
};
</script>
<style lang="scss" scoped>
.e-search-from-item {
	padding-bottom: 15px;
	.el-select {
		width: 100%;
	}
}
.el-input {
	// height: 37px;
	// padding-bottom: 10px;
	line-height: 45px;
}
.el-form-item {
	min-height: 45px;
}

.selectfromdown {
	// height: 40px !important;
}

// :deep(.el-form-item__error) {
// 	top: 100%;
// }
.el-date-picker {
  height: 40px !important;
}
</style>
